<template>
  <ElButton v-if="visible && innerShow" :="attrs" :disabled="innerDisabled" :type="innerType">
    {{ props.formatter ? props.formatter(attrs.row, query) : props.content }}
  </ElButton>
</template>

<script setup lang="ts">
import { useAttrs, computed, inject } from 'vue'
const attrs = useAttrs()

interface Props {
  content: string;
  auths: Set<string>;
  auth: null | string;
  type?: string | ((row: any) => string);
  formatter?: (row: any, query: any) => string;
  disabled?: (row: any, query: any) => boolean;
  show?: (row: any, query: any) => boolean;
}
const props = withDefaults(defineProps<Props>(), {
  content: '',
  auth: null,
  auths: () => new Set()
})

const query = inject('query')

const visible = computed(() => {
  return !props.auth || props.auths.has(props.auth)
})

const innerDisabled = computed(() => {
  return props.disabled ? props.disabled(attrs.row, query) : false
})

const innerType = computed(() => {
  if (!props.type) return props.type
  return typeof props.type === 'string' ? props.type : props.type(attrs.row)
})

const innerShow = computed(() => {
  if (!props.show) return true
  return props.show(attrs.row, query) 
})

defineExpose({
  auth: props.auth
})
</script>
